<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <style type="text/css">
        ${demo.css}
    </style>
    <script type="text/javascript">
        $(function () {
            $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function (data) {

                $('#container').highcharts({

                    chart: {
                        type: 'arearange',
                        zoomType: 'x'
                    },

                    title: {
                        text: 'Temperature variation by day'
                    },

                    xAxis: {
                        type: 'datetime'
                    },

                    yAxis: {
                        title: {
                            text: null
                        }
                    },

                    tooltip: {
                        crosshairs: true,
                        shared: true,
                        valueSuffix: '°C'
                    },

                    legend: {
                        enabled: false
                    },

                    series: [
                        {
                            name: 'Temperatures',
                            data: data
                        }
                    ]

                });
            });

        });
    </script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
<script src="../../js/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</body>
</html>
